<template>
	<view class="page">
		<!-- 遮罩层 -->
		<view class="button flex-between">
			<span>遮罩层</span>
			<switch class="" :checked="pMask" @change="maskChange" />
		</view>

		<view v-for="(item,index) in items" :key="index">
			<view v-if="item.desc" class="desc">{{item.desc}}</view>
			<button class="button" @tap="datetimePicker(index)">{{item.pValue?item.pValue:item.pFormat}}</button>

			<ch-datetime-picker :isShow="item.pShowFlag" :value="item.pValue" :format="item.pFormat" :min="item.pMin" :max="item.pMax" :mask="pMask"
				:addYear="item.pAddYear" @cancle="pickerCancel" @confirm="pickerConfirm">
			</ch-datetime-picker>
		</view>

		<view>
			<view class="desc">启动方式分为属性的show和ref，接下来是ref启动的示例
				<br />
				this.$refs.myDTPicker.show()
				<br />
				this.$refs.myDTPicker.hide()
			</view>
			<button class="button" @tap="datetimePicker1">myDTPicker</button>
		</view>
		<!-- 启动方式分为属性的show和ref，接下来是ref启动的示例 -->
		<ch-datetime-picker ref="myDTPicker" @confirm="pickerConfirm1"></ch-datetime-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				curIndex: -1,
				pMask: true,

				items: [{
						pShowFlag: false,
						pValue: '',
						pFormat: 'yyyy',
						pMin: '',
						pMax: '',
						pAddYear: null,
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'yyyy-MM',
						pMin: '',
						pMax: '',
						pAddYear: null,
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'yyyy-MM-dd',
						pMin: '',
						pMax: '',
						pAddYear: null,
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'yyyy-MM-dd hh',
						pMin: '',
						pMax: '',
						pAddYear: null,
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'yyyy-MM-dd hh:mm',
						pMin: '',
						pMax: '',
						pAddYear: null,
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'yyyy-MM-dd hh:mm:ss',
						pMin: '',
						pMax: '',
						pAddYear: null,
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'hh:mm:ss',
						pMin: '',
						pMax: '',
						pAddYear: null,
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'hh:mm',
						pMin: '',
						pMax: '',
						pAddYear: null,
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'hh',
						pMin: '',
						pMax: '',
						pAddYear: null,
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'yyyy年MM月dd日 hh时mm分ss秒',
						pMin: '',
						pMax: '',
						pAddYear: null,
						desc: '其他格式'
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'yyyy/MM/dd hh:mm:ss',
						pMin: '',
						pMax: '',
						pAddYear: null,
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'hh点',
						pMin: '',
						pMax: '',
						pAddYear: null,
					},
					{
						pShowFlag: false,
						pValue: '10:18:12',
						pFormat: 'hh:mm:ss',
						pMin: '',
						pMax: '',
						pAddYear: null,
						desc: '默认时间'
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'yyyy-MM-dd hh:mm:ss',
						pMin: '2021-05-10 12:33:38',
						pMax: '2091-01-20 08:42:00',
						pAddYear: null,
						desc: '最小可选时间：2021-05-10 12:33:38 \n 最大可选时间：2091-01-20 08:42:00'
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'yyyy-MM-dd hh:mm:ss',
						pMin: '2021-05-21 12:30:21',
						pMax: '2021-05-20 08:00:00',
						pAddYear: null,
						desc: `最小可选时间：2021-05-20 12:30:21
							   最大可选时间：2021-05-10 08:00:00
						       如果最大可选时间小于最小可选时间，则最大可选时间等于最小可选时间`
					},
					{
						pShowFlag: false,
						pValue: '',
						pFormat: 'yyyy-MM-dd hh:mm:ss',
						pMin: '',
						pMax: '',
						pAddYear: 6,
						desc: '默认最大可选时间为当前年月的最后一秒 \n addYear:最大可选时间在当前年份再往后推多少年 \n addYear为6'
					},
				],
				pValue: '',
			}
		},
		onLoad() {},
		onUnload() {
			this.curIndex = -1
		},
		methods: {
			datetimePicker(index) {
				this.curIndex = index
				this.items[index].pShowFlag = true
			},
			datetimePicker1() {
				this.$refs.myDTPicker.show()
			},
			pickerCancel(data) {
				this.items[this.curIndex].pShowFlag = false
			},
			pickerConfirm(data) {
				this.items[this.curIndex].pShowFlag = false
				this.items[this.curIndex].pValue = data.value
			},
			pickerConfirm1(data) {
				this.pValue = data.value
			},
			maskChange(e) {
				this.pMask = e.detail.value
			}
		}
	}
</script>
<style>
	.page {
		padding: 20rpx;
	}

	.mask-switch {
		margin-bottom: 20rpx;
	}

	.desc {
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		color: #ff0000;
		font-size: 12px;
		white-space: pre-line;
	}

	.button {
		margin-bottom: 20rpx;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
